<template>
  <div class="address fixed-top">
    <!-- 引入公共头部 -->
    <NavBar title="我的地址" :url="addressUrl" fixed back right-url="/user/addressAdd" right-text="新增"/>
    <div class="van-address-list" style="padding-bottom: 0px">
      <div v-if="list === null" >
        <EmptyData text="您还没有收货地址！赶快添加吧！"/>
      </div>
      <div class="van-radio-group" v-if="list !== null">
        <div class="van-cell-group van-hairline--top-bottom">
          <div class="van-cell van-cell--clickable van-address-item" v-for="(address, index) in list" :key="index">
            <span @click="toConfirm(address.id)">
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-radio">
                <span class="van-radio__input">
                  <input type="radio" value="1" class="van-radio__control">
                  <div v-if="address.isDefault == 0">
                    <i class="van-icon van-icon-check"></i>
                  </div>
                  <div v-if="address.isDefault == 1">
                    <i class="van-icon van-icon-checked"></i>
                  </div>
                </span>
                <span class="van-radio__label">
                  <div class="van-address-item__name">{{address.receiver}}&nbsp;&nbsp;{{address.telephone}}</div>
                  <div class="van-address-item__address">{{address.province}}&nbsp;&nbsp;
                    {{address.city}}&nbsp;&nbsp;{{address.district}}&nbsp;&nbsp;
                    {{address.addrDetail}}
                  </div>
                </span>
              </div>
            </div>
            </span>
            <i class="van-icon van-icon-edit van-address-item__edit" @click="onEdit(address.id)">
            </i>
          </div>
        </div>
      </div>
    </div>
    <!--<van-button size="large" type="danger" style="position: fixed;bottom: 0px;" @click="onAdd()">新增地址</van-button>-->
  </div>
</template>
<script>
import Vue from 'vue'
import NavBar from '../../components/common/NavBar.vue'
import { AddressList, Toast } from 'vant'
import userApi from '../../api/user'
import EmptyData from '../../components/common/EmptyData.vue'

Vue.use(AddressList)
export default {
  name: 'Address',
  data () {
    return {
      addressUrl: '/user',
      list: []
    }
  },
  components: {
    NavBar,
    EmptyData
  },
  mounted () {
    this.getAddressList()
    this.getAddressUrl()
  },
  methods: {
    getAddressUrl: function () {
      if (sessionStorage.getItem('confirmNum') !== null) {
        this.addressUrl = '/cart/confirm'
      }
    },
    // 去订单页面
    toConfirm: function (val) {
      // 判断订单页面传过来的参数是否存在
      if (sessionStorage.getItem('confirmNum') !== null) {
        // 跳转订单页面
        this.$router.push({path: '/cart/confirm', query: {confirmAddressId: val, addressNum: 1}})
      }
    },
    // 去编辑页面
    onEdit: function (val) {
      this.$router.push({path: '/user/addressEdit', query: {addressId: val}})
    },
    // 获取用户所有地址
    getAddressList: function () {
      const _this = this
      userApi.getAddressList(this.id).then(function (res) {
        if (res.data.success) {
          if (res.data.re.length === 0) {
            _this.list = null
          } else {
            _this.list = res.data.re
          }
        } else {
          Toast(res.data.msg)
        }
      })
    },
    // 去新增页面
    onAdd: function () {
      this.$router.push('/user/addressAdd')
    }
  }
}

</script>
